<template>
  <div class="loginContainer">
<!--    <div class='topBar'>-->
<!--      <span class="title">百诺环保</span>-->
<!--    </div>-->
    <div class="formBox">
      <p>
        云档案
      </p>
      <q-form
        @submit="onSubmit"
        @reset="onReset"
        class="q-gutter-md"
      >
        <q-input
          outlined
          v-model="paramsData.username"
          label="账号*"
          hint=""
          color="primary"
          dark
          lazy-rules
          :rules="[ val => val !== null && val !== '' || '账号不能为空!']"
        />
        <q-input
          outlined
          type="password"
          v-model="paramsData.password"
          label="你的密码 *"
          hint=""
          color="primary"
          dark
          lazy-rules
          :rules="[
          val => val !== null && val !== '' || '密码不能为空',
        ]"
        />
        <q-btn label="登 录" type="submit" color="cyan" style="width: 100%; line-height: 3vh"/>
      </q-form>
      <div><button @click="test">test</button></div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line
import { Cookies, Loading, useQuasar  } from 'quasar'
import { defineComponent, reactive } from 'vue'
import { login } from 'src/network'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent({
  name: 'Login.vue',
  setup () {
    const route = useRoute()
    const router = useRouter()
    const paramsData = reactive({
      username: '',
      password: ''
    })
    const $q = useQuasar()
    const test = () => {
      console.log(route)
      router.replace('/')
    }
    const onSubmit = (e) => {
      if (!paramsData.username || !paramsData.password) {
        $q.notify({ type: 'warning', message: '警告！用户名和密码不能为空' })
        return
      }
      Loading.show()
      // $axios.post('/api/authority/login/', {
      //   ...paramsData
      // })
      login(paramsData).then(res => {
        console.log(res)
        const { token } = res
        console.log(token)
        localStorage.setItem('token', `${token}`)
        localStorage.setItem('username', paramsData.username)
        $q.notify({
          type: 'positive',
          message: '登录成功!'
        })
        Loading.hide()
        router.replace('/')
      }).catch(error => {
        console.log(error)
        if (error.response.status !== 200) {
          $q.notify(
            {
              type: 'negative',
              message: '失败，用户不存在'
            })
        }
      })
    }
    const onReset = () => {

    }
    return {
      test,
      onSubmit,
      onReset,
      paramsData
    }
  }
})
</script>

<style lang="scss" scoped>
.loginContainer{
  width: 100%;
  height: 100vh;
  background-image: url("/images/loginBackground.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size: cover;
  /*box-shadow: 0 1px 50px #dfd3c2 ;*/

}
.topBar{
  background-color: #3c75a8;
  height: 10vh;
  position: relative;
}
.title{
  color: white;
  position: relative;
  left: 20%;
  top: 4vh;
}
.formBox{
  >p{
    font-size: 4vw;
    font-family: 楷体;
  }
  width: 26vw;
  position: absolute;
  background-color: rgba(63, 63, 64, 0.5);
  color: #eeeeee;
  right: 10%;
  top: 20%;
  padding: 30px;
  border-radius: 15px;
}
</style>
